<template>
  <a-range-picker
    class="qc_manange_date_select"
    popupClassName="common_date_picker_dropdown"
    format="YYYY-MM-DD"
    :valueFormat="format"
    :disabledDate="getDisabledRange"
    @calendarChange="calendarChange"
    @change="changeRange"
    @openChange="openChange"
    :presets="rangesTime"
    v-model:value="rangeList"
    :disabled="disabled"
  >
  </a-range-picker>
</template>
<script setup lang="ts">
import moment from 'moment'
import { dateProps } from './props'
import { reactive, ref } from 'vue'
interface TimeOption {
  label: string
  value: any
}
const props = defineProps(dateProps)
const emit = defineEmits(['changeRange'])
const btnList = reactive([
  {
    id: '1',
    dateLen: 1,
    dateDesc: '今日',
    start: moment().startOf('d').format('YYYY-MM-DD HH:mm:ss'),
    end: moment().endOf('d').format('YYYY-MM-DD HH:mm:ss')
  },
  {
    id: '2',
    dateLen: 3,
    dateDesc: '三日',
    start: moment().subtract(2, 'days').startOf('d').format('YYYY-MM-DD HH:mm:ss'),
    end: moment().endOf('d').format('YYYY-MM-DD HH:mm:ss')
  },
  {
    id: '3',
    dateLen: 7,
    dateDesc: '七日',
    start: moment().subtract(6, 'days').startOf('d').format('YYYY-MM-DD HH:mm:ss'),
    end: moment().endOf('d').format('YYYY-MM-DD HH:mm:ss')
  },
  {
    id: '4',
    dateLen: 15,
    dateDesc: '半个月',
    start: moment().subtract(14, 'days').startOf('d').format('YYYY-MM-DD HH:mm:ss'),
    end: moment().endOf('d').format('YYYY-MM-DD HH:mm:ss')
  },
  {
    id: '5',
    dateLen: moment().diff(moment().startOf('month'), 'days') + 1,
    dateDesc: '当月',
    start: moment().startOf('month').format('YYYY-MM-DD HH:mm:ss'),
    end: moment().endOf('d').format('YYYY-MM-DD HH:mm:ss')
  },
  {
    id: '6',
    dateLen: moment().add(-1, 'months').daysInMonth(),
    dateDesc: '上月',
    start: moment().add(-1, 'months').startOf('month').format('YYYY-MM-DD HH:mm:ss'),
    end: moment().add(-1, 'months').endOf('month').format('YYYY-MM-DD HH:mm:ss')
  },
  {
    id: '7',
    dateLen: moment().diff(moment().add(-2, 'months').startOf('month'), 'days') + 1,
    dateDesc: '三个月',
    start: moment().add(-2, 'months').startOf('month').format('YYYY-MM-DD HH:mm:ss'),
    end: moment().endOf('d').format('YYYY-MM-DD HH:mm:ss')
  },
  {
    id: '8',
    dateLen: moment().diff(moment().add(-5, 'months').startOf('month'), 'days') + 1,
    dateDesc: '半年',
    start: moment().add(-5, 'months').startOf('month').format('YYYY-MM-DD HH:mm:ss'),
    end: moment().endOf('d').format('YYYY-MM-DD HH:mm:ss')
  },
  {
    id: '9',
    dateLen: moment().diff(moment().startOf('year'), 'days') + 1,
    dateDesc: '今年',
    start: moment().startOf('year').format('YYYY-MM-DD HH:mm:ss'),
    end: moment().endOf('d').format('YYYY-MM-DD HH:mm:ss')
  },
  {
    id: '10',
    dateLen: 365,
    dateDesc: '去年',
    start: moment([moment().year() - 1, 0, 1])
      .startOf('year')
      .format('YYYY-MM-DD HH:mm:ss'),
    end: moment([moment().year() - 1, 0, 1])
      .endOf('year')
      .format('YYYY-MM-DD HH:mm:ss')
  }
])
const rangesTime = ref<TimeOption[]>([])
const calendarList = ref<string[]>([])
const rangeList = ref<string[]>([])
function getDisabledRange(date: string): boolean {
  if (calendarList.value.length === 1) {
    let center: string = calendarList.value[0]
    let start: string = moment(center).subtract(props.dateRange, 'days').format('YYYY-MM-DD')
    let end: string = moment(center).add(props.dateRange, 'days').format('YYYY-MM-DD')
    return moment(date).isBefore(start) || !moment(date).isBefore(end)
  } else {
    return false
  }
}
function calendarChange(dateList: Array<string>) {
  calendarList.value = dateList || []
}
function changeRange(dateList: Array<string>) {
  if (dateList.length) {
    let start = dateList[0] ? moment(dateList[0]).startOf('d').format(props.format) : ''
    let end = dateList[1] ? moment(dateList[1]).endOf('d').format(props.format) : ''
    rangeList.value = [start, end]
  } else {
    rangeList.value = []
  }
  emit('changeRange', rangeList.value)
}
function openChange() {
  calendarList.value = []
}
function initRange(dateList: Array<string>) {
  console.log('%c [ dateList ]-133', 'font-size:13px; background:pink; color:#bf2c9f;', dateList)
  rangeList.value = dateList
  const temp: Array<TimeOption> = []
  btnList.forEach((item) => {
    if (item.dateLen <= props.dateRange) {
      temp.push({
        label: item.dateDesc,
        value: [moment(item.start), moment(item.end)]
      })
    }
  })
  rangesTime.value = temp
}

defineExpose({
  initRange
})
</script>
